<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>openEuler2021年度报告</title>
</head>
<link rel="stylesheet" href="./css/common.css">
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
<script src="./js/swiper.js"></script>
<script src="./js/axios.js"></script>
<link rel="stylesheet" href="./css/pc.css">
<link rel="stylesheet" href="./css/mob.css">
<script>
    var _hmt = _hmt || [];
    (function () {
        // 百度统计
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?ab8d86daab9a8e98cf8faa239aefcd3c";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();
</script>
<body>
    <audio id="bgm" src="./bgm/openEuler_BGM_2021.mp3" autoplay preload loop></audio>
    <div class="bgm-open">
        <img class="closebgm" src="./images/close.svg" alt="">
    </div>
    <div class="pc-box">
        <div class="contribution none">
            <div class="container box-one">
                <div class="front">

                </div>
                <div class="back">
                    <div class="contents">
                    </div>
                </div>
            </div>
            <div class="container box-tow">
                <div class="front">

                </div>
                <div class="back">
                    <div class="contents">
                    </div>
                </div>
            </div>
            <div class="container box-three">
                <div class="front">

                </div>
                <div class="back">
                    <div class="contents">
                    </div>
                </div>
            </div>
            <div class="container box-four">
                <div class="front">

                </div>
                <div class="back">
                    <div class="contents">
                    </div>
                </div>
            </div>
        </div>
        <div class="no-contribution">
            <div class="container box-one">
                <div class="front">

                </div>
                <div class="back">
                    <div class="contents">
                        <div class="page page-one">
                            <div class="text-box">
                                <p class="euler-title">openEuler两周岁</p>
                                <p class="euler-title2">遇见开源世界的自己</p>
                                <p class="euler-title2">Dear</p>
                                <p class="user-name pinkColor">${data.user_login}</p>
                                <p class="one-text">openEuler 今天两周岁了！</p>
                                <p class="one-text">在这两年的时光里，openEuler在惊喜地成长：</p>
                                <p class="one-text">社区用户 <span class="yellow-color">370,000+</span>；</p>
                                <p class="one-text">软件包<span class="yellow-color">8600+</span>；</p>
                                <p class="one-text">社区贡献者<span class="yellow-color">8000+</span>；</p>
                                <p class="one-text">商用OSV<span class="yellow-color">11家</span>；</p>
                                <p class="one-text">企业成员<span class="yellow-color">300+家</span></p>
                                <p class="one-text">······</p>
                            </div>
                            <div class="pic">
                                <div class="bg-screen"></div>
                                <section>
                                    <div class="rotate-item"><img src="images/pic1/screen-big.png" alt="" /></div>
                                    <div class="rotate-item"><img src="images/pic1/screen-m.png" alt="" /></div>
                                    <div class="rotate-item"><img src="images/pic1/screen-s.png" alt="" /></div>
                                    <div class="rotate-item"><img src="images/pic1/file-one.png" alt="" /></div>
                                    <div class="rotate-item"><img src="images/pic1/white-paper.png" alt="" /></div>
                                    <div class="rotate-item"><img src="images/pic1/talk.png" alt="" /></div>
                                    <div class="person"></div>
                                </section>
                                <div class="desk">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="container box-four">
                <div class="front">

                </div>
                <div class="back">
                    <div class="contents">
                        <div class="page page-six noContribution">
                            <div class="main">
                                <div class="six-logo"><img src="./images/pic6/logo.png" alt=""></div>
                                <div class="text-box ">
                                    <p class="">在这里有7900+的社区开发者</p>
                                    <p class=" delay-time1">与你并肩同行，</p>
                                    <p class=" delay-time2">在这里有90+个SIG组，</p>
                                    <p class="">相信你总能找到和你志趣相投的人；</p>
                                    <p class=" delay-time4">在这里会有</p>
                                    <p class=" ">遍及全球100+个国家、</p>
                                    <p class="">1200+城市的用户</p>
                                    <p class="">和你不期而遇</p>
                                    <p class="">期待2022年，</p>
                                    <p class="">会有属于我和你的故事发生······</p>
                                    <p class="">新年快来！</p>
                                    <p class="bold">openEuler 社区</p>
                                    <p class="bold">呈上</p>
                                </div>
                                <div class="qr-code"><img src="./images/pic5/qr-code.png" alt="">
                                    <p>查看您的社区年度报告</p>
                                </div>
                            </div>
                            <div class="bg-six">
                                <div class="footer">
                                </div>
                                <div class="border">
                                    <img src="./images/pic6/border.png" alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="mob-box swiper" id="outer-container">
    </div>
   <script src="./js/main.js"></script>
</body>

</html>